<template>
	<view>
		<u-navbar title="关注" back-text="关注" :back-text-style="{'color':'#fff'}" backIconColor="#fff" titleColor="#fff"
			:background="background"></u-navbar>
		<uni-list>
			<uni-list :border="true">
				<uni-list-chat v-for="(follower,index) in followers" 
					:key="follower.id"
					:title="follower.nickname"
					:note="follower.account"
					:avatar="follower.avatar"
					:time="follower.updateTime"></uni-list-chat>
				<!-- 显示圆形头像 -->
				<!-- <uni-list-chat :avatar-circle="true" title="uni-app"
					avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
					note="您收到一条新的消息" time="2020-02-02 20:20"></uni-list-chat>
				<!-- 右侧带角标 -->
				<!-- <uni-list-chat title="uni-app"
					avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
					note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat> -->
				<!-- 头像显示圆点 -->
				<!-- <uni-list-chat title="uni-app"
					avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
					note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> -->
				<!-- 头像显示角标 -->
				<!-- <uni-list-chat title="uni-app"
					avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
					note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat> -->
				<!-- 显示多头像 -->
				<!-- <uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20"
					badge-positon="left" badge-text="dot"></uni-list-chat> -->
				<!-- 自定义右侧内容 -->
				<!-- <uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20"
					badge-positon="left" badge-text="dot">
					<view class="chat-custom-right">
						<text class="chat-custom-text">刚刚</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
				<!-- 		<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
					</view>
				</uni-list-chat> -->
			</uni-list>
		</uni-list>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				followers: [{
					id: 0,
					account: '',
					avatar: '',
					nickname: '',
					updateTime:''
				}],
				avatarList: [{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				}]
			}
		},
		created() {
			this.findFollowers();
		},
		
		methods: {
			findFollowers() {
				this.$api.get('/follow/findFollowers', {
					"userId": "1550327189277282305"
				}).then(resp => {
					console.log('关注列表:', resp)
					this.followers = resp.data
					console.log("followers:",this.followers)
				})
			}
		}
	}
</script>

<style>
	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
</style>
